<template>
  <div class="products-content ">
    <div class="row">
      <div
        class="col-lg-3 col-sm-6 mt-4"
        v-for="(product, index) in productList"
        :key="index">
        <div class="content">
          <a :href="product.url">
            <img :src="product.image" class="img-fluid animate__animated animate__slideInRight" alt="" />
            <div class="lte-item-descr text-center">
              <ul class="star-rating d-flex justify-content-center">
                <li v-for="star in product.rating" :key="star">
                  <a href="#">
                    <span class="fa fa-star mr-1" aria-hidden="true"></span>
                  </a>
                </li>
              </ul>
              <h4 class="product-title">{{ product.title }}</h4>
              <p class="mb-4">{{ product.description }}</p>
              <span class="price">
                <span class="amount">
                  <span class="price-currency">$</span>
                  {{ product.price }}
                </span>
              </span>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { defineProps } from "vue";

// 定义接收的 props
const props = defineProps({
  productList: {
    type: Array,
    required: true,
  },
});
</script>
